<template>
    <view class="container">
        <view class="fortune-header">
            <text class="fortune-title">{{ fortuneInfo.title }}</text>
            <text class="fortune-desc">{{ fortuneInfo.description }}</text>
        </view>

        <!-- 塔罗牌占卜 -->
        <view v-if="type === 'tarot'" class="tarot-section">
            <view class="cards-container" v-if="!showResult">
                <view class="card" v-for="(card, index) in tarotCards" :key="index"
                    :class="{ selected: selectedCards.includes(index) }" @click="selectCard(index)">
                    <image src="/static/card-back.png" class="card-image"></image>
                </view>
            </view>
            <view class="result-section" v-else>
                <view class="result-card" v-for="(card, index) in selectedCardsInfo" :key="index">
                    <image :src="card.image" class="result-card-image"></image>
                    <text class="card-name">{{ card.name }}</text>
                    <text class="card-meaning">{{ card.meaning }}</text>
                </view>
            </view>
        </view>

        <!-- 星座运势 -->
        <view v-if="type === 'zodiac'" class="zodiac-section">
            <picker @change="onZodiacChange" :value="zodiacIndex" :range="zodiacSigns">
                <view class="picker">
                    <text>选择星座: {{ zodiacSigns[zodiacIndex] }}</text>
                </view>
            </picker>
            <view class="fortune-result" v-if="zodiacResult">
                <view class="fortune-item" v-for="(item, key) in zodiacResult" :key="key">
                    <text class="item-title">{{ key }}</text>
                    <text class="item-content">{{ item }}</text>
                </view>
            </view>
        </view>

        <!-- 姓名测算 -->
        <view v-if="type === 'name'" class="name-section">
            <input type="text" v-model="userName" placeholder="请输入您的姓名" class="name-input" />
            <view class="name-result" v-if="nameResult">
                <view class="result-item" v-for="(item, index) in nameResult" :key="index">
                    <text class="item-label">{{ item.label }}</text>
                    <text class="item-value">{{ item.value }}</text>
                </view>
            </view>
        </view>

        <!-- 周公解梦 -->
        <view v-if="type === 'dream'" class="dream-section">
            <textarea v-model="dreamContent" placeholder="请描述您的梦境" class="dream-input"></textarea>
            <view class="dream-result" v-if="dreamResult">
                <text class="dream-interpretation">{{ dreamResult }}</text>
            </view>
        </view>

        <button class="start-btn" @click="startDivination" v-if="!showResult">开始占卜</button>
        <button class="reset-btn" @click="resetDivination" v-else>重新占卜</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            type: '',
            showResult: false,
            fortuneInfo: {},

            // 塔罗牌
            tarotCards: new Array(22).fill({}),
            selectedCards: [],
            selectedCardsInfo: [],

            // 星座
            zodiacSigns: ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座',
                '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'],
            zodiacIndex: 0,
            zodiacResult: null,

            // 姓名
            userName: '',
            nameResult: null,

            // 解梦
            dreamContent: '',
            dreamResult: null
        }
    },
    onLoad(option) {
        this.type = option.type
        this.setFortuneInfo()
    },
    methods: {
        setFortuneInfo() {
            const typeMap = {
                tarot: {
                    title: '塔罗牌占卜',
                    description: '请选择三张牌，让塔罗牌为您揭示命运的指引'
                },
                zodiac: {
                    title: '星座运势',
                    description: '选择您的星座，查看今日运势'
                },
                name: {
                    title: '姓名测算',
                    description: '解读您姓名中蕴含的天机'
                },
                dream: {
                    title: '周公解梦',
                    description: '揭示梦境背后的玄机'
                }
            }
            this.fortuneInfo = typeMap[this.type]
        },

        // 塔罗牌方法
        selectCard(index) {
            if (this.selectedCards.length >= 3 || this.selectedCards.includes(index)) return
            this.selectedCards.push(index)
        },

        // 星座方法
        onZodiacChange(e) {
            this.zodiacIndex = e.detail.value
        },

        // 开始占卜
        startDivination() {
            switch (this.type) {
                case 'tarot':
                    if (this.selectedCards.length !== 3) {
                        uni.showToast({ title: '请选择三张塔罗牌', icon: 'none' })
                        return
                    }
                    this.getTarotResult()
                    break
                case 'zodiac':
                    this.getZodiacResult()
                    break
                case 'name':
                    if (!this.userName) {
                        uni.showToast({ title: '请输入姓名', icon: 'none' })
                        return
                    }
                    this.getNameResult()
                    break
                case 'dream':
                    if (!this.dreamContent) {
                        uni.showToast({ title: '请描述您的梦境', icon: 'none' })
                        return
                    }
                    this.getDreamResult()
                    break
            }
            this.showResult = true
        },

        // 重置占卜
        resetDivination() {
            this.showResult = false
            this.selectedCards = []
            this.selectedCardsInfo = []
            this.zodiacResult = null
            this.nameResult = null
            this.dreamResult = null
        },

        // 获取占卜结果
        getTarotResult() {
            // 模拟塔罗牌结果
            const tarotDatabase = [
                { name: '命运之轮', meaning: '机会来临，命运的转折点' },
                { name: '星星', meaning: '希望与信心，光明就在前方' },
                { name: '太阳', meaning: '幸福与成功，充满活力' },
                { name: '月亮', meaning: '直觉与潜意识，内心的指引' },
                { name: '正义', meaning: '公平与平衡，理性的决定' }
            ]
            this.selectedCardsInfo = this.selectedCards.map(() => {
                return tarotDatabase[Math.floor(Math.random() * tarotDatabase.length)]
            })
        },

        getZodiacResult() {
            // 模拟星座运势
            this.zodiacResult = {
                '整体运势': '今日运势不错，适合尝试新事物',
                '爱情运势': '单身的人可能会遇到心仪的对象',
                '事业运势': '工作中会有新的机遇，保持积极态度',
                '财运': '财运稳定，适合理财投资'
            }
        },

        getNameResult() {
            // 模拟姓名测算
            this.nameResult = [
                { label: '性格特点', value: '善良开朗，富有同情心' },
                { label: '事业发展', value: '适合从事创造性工作' },
                { label: '人际关系', value: '人缘较好，容易获得他人信任' },
                { label: '财运分析', value: '财运良好，注意稳健理财' }
            ]
        },

        getDreamResult() {
            // 模拟解梦
            this.dreamResult = '您的梦境暗示着内心的渴望和期待，建议保持乐观积极的心态，好运即将来临。'
        }
    }
}
</script>

<style>
.container {
    padding: 20rpx;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    min-height: 100vh;
    box-sizing: border-box;
    max-width: 1200rpx;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.fortune-header {
    text-align: center;
    margin-bottom: 30rpx;
    padding: 0 15rpx;
}

.fortune-title {
    font-size: 36rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 15rpx;
    display: block;
}

.fortune-desc {
    font-size: 28rpx;
    color: #666;
    display: block;
}

/* 塔罗牌样式 */
.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160rpx, 1fr));
    gap: 20rpx;
    padding: 15rpx;
    margin: 0 auto;
    max-width: 960rpx;
}

.card {
    width: 100%;
    height: 240rpx;
    position: relative;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.card.selected {
    transform: translateY(-20rpx);
    box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.15);
}

.card-image {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
    transition: all 0.3s ease;
}

.result-section {
    padding: 20rpx;
}

.result-card {
    background: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    text-align: center;
}

.result-card-image {
    width: 160rpx;
    height: 240rpx;
    border-radius: 10rpx;
    margin-bottom: 10rpx;
}

.card-name {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 10rpx;
    display: block;
}

.card-meaning {
    font-size: 28rpx;
    color: #666;
    display: block;
}

.zodiac-section,
.name-section,
.dream-section {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10rpx;
    padding: 20rpx;
    margin: 0 auto 20rpx;
    width: 100%;
    max-width: 960rpx;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
}

.picker {
    padding: 20rpx;
    background: #fff;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
}

.fortune-result,
.name-result {
    margin-top: 20rpx;
}

.fortune-item,
.result-item {
    background: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    margin-bottom: 10rpx;
}

.item-title,
.item-label {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 10rpx;
    display: block;
}

.item-content,
.item-value {
    font-size: 26rpx;
    color: #666;
    display: block;
}

.name-input,
.dream-input {
    width: 100%;
    background: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
}

.dream-input {
    height: 200rpx;
}

.dream-interpretation {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
}

.start-btn,
.reset-btn {
    width: 90%;
    max-width: 600rpx;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    margin: 30rpx auto;
    background: #007AFF;
    color: #fff;
    font-size: 32rpx;
    text-align: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
    transition: all 0.3s ease;
}

.start-btn:active,
.reset-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

@media screen and (min-width: 768px) {
    .container {
        padding: 40rpx;
    }

    .cards-container {
        grid-template-columns: repeat(auto-fill, minmax(200rpx, 1fr));
    }

    .card {
        height: 300rpx;
    }

    .fortune-header {
        margin-bottom: 40rpx;
    }

    .fortune-title {
        font-size: 44rpx;
    }

    .fortune-desc {
        font-size: 32rpx;
    }
}

.reset-btn {
    background: #FF6B6B;
}
</style>
